<template>
    <layout-default
            name="article"
            title="文章详情页"
            :loaded="loaded">
        <div class="a-content">
            <div class="c-title">
                <h1>{{info.article.title}}</h1>
            </div>
            <div class="c-author">
                <div class="a-left" @click="go('/author/1')">
                    <div class="l-avatar">
                        <img :src="info.user.avatar | avatar" alt/>
                    </div>
                    <div class="l-name">
                        <span>{{info.user.nickname}}</span>
                    </div>
                </div>
                <div class="a-right">
                    <div class="r-focus">
                        <i class="iconfont icon-add"></i>
                        <span>关注</span>
                    </div>
                </div>
            </div>
            <div class="c-article">
                <md-preview :md="info.article.text"></md-preview>
            </div>
        </div>
        <div class="a-ad">
            <google-ad :sn="8082672831"></google-ad>
        </div>
        <div class="a-comment">
            <div class="c-title">
                <span>评论</span>
            </div>
            <div class="c-list">
                <div class="l-item">
                    <div class="i-left">
                        <img src="//cdn.kyeteo.cn/FpfQsM2ghNmiIJ89BHONjUZR80os" alt="">
                    </div>
                    <div class="i-right">
                        <div class="r-name">
                            <span>kyeteo码上闲谈</span>
                        </div>
                        <div class="r-text">
                            <p>不错，继续加油！！</p>
                        </div>
                        <div class="r-do">
                            <div class="d-left">
                                <span>9分钟前</span>
                            </div>
                            <div class="d-right">
                                <div class="d-right-item">
                                    <i class="iconfont icon-dianzan"></i>
                                </div>
                                <div class="d-right-item">
                                    <i class="iconfont icon-pinglun"></i>
                                    <span>回复</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="a-bar border-1px-top">
            <div class="b-input">
                <i class="iconfont icon-iconfront-"></i>
                <span>写评论...</span>
            </div>
            <div class="b-do">
                <div class="d-item">
                    <i class="iconfont icon-pinglun"></i>
                </div>
                <div class="d-item ">
                    <i class="iconfont icon-dianzan"></i>
                </div>
            </div>
        </div>
    </layout-default>

</template>

<script>
    export default {

        metaInfo () {
            const title = this.info.article.title ? this.info.article.title : '文章详情'
            return {title}
        },
        data() {
            return {
                loaded: false,
                info: {
                    article: {},
                    mostViewArticles: [],
                    promotes: [],
                    user: {}
                }
            }
        },
        methods: {
            async getArticle() {
                const res = await this.$api.page.article({id: this.$route.params.id})
                if (res.done) {
                    this.title =
                    this.info = res.data
                    this.loaded = true
                }
            }
        },
        mounted() {
            this.getArticle()
        }
    }
</script>


<style lang="less" scoped>
    .article {
        .a-content{
            background: white;
            .c-title {
                padding: 20px 30px;
                h1 {
                    font-size: 46px;
                    line-height: 62px;
                    font-weight: 500;
                }
            }

            .c-author {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 150px;
                padding: 0 30px;

                .a-left {
                    display: flex;
                    align-items: center;

                    .l-avatar {
                        flex-basis: 78px;
                        height: 78px;
                        border-radius: 39px;
                        overflow: hidden;
                        background: #f4f5f5;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .l-name {
                        padding-left: 20px;

                        span {
                            font-size: 28px;
                            font-weight: 700;
                        }
                    }
                }

                .a-right {
                    display: flex;
                    align-items: center;

                    .r-focus {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 150px;
                        height: 64px;
                        box-sizing: border-box;
                        border: 1px solid #007fff;
                        color: #007fff;
                    }
                }
            }

            .c-article {
            }
        }
        .a-ad{
            margin-top: 20px;
        }
        .a-comment{
            padding: 20px 0 100px 0;
            .c-title{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                padding: 0 30px;
                background: white;
                span{
                    color:#71777c;
                }
            }
            .c-list{
                padding: 50px 30px;
                background: white;
                .l-item{
                    display: flex;
                    .i-left{
                        flex-grow: 0;
                        img{
                            width:70px;
                            height: 70px;
                            border-radius: 35px;
                        }
                    }
                    .i-right{
                        flex:1;
                        padding-left: 20px;
                        font-size: 28px;
                        .r-name{
                            display: flex;
                            align-items: center;
                            height: 70px;
                        }
                        .r-text{
                            padding: 20px 0;
                            p{
                                padding: 20px;
                                background: #f7f7f7;
                            }
                        }
                        .r-do{
                            display: flex;
                            justify-content: space-between;
                            color:#71777c;
                            .d-right{
                                display: flex;
                                .d-right-item{
                                    &:not(:first-child){
                                        margin-left: 20px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .a-bar{
            position: fixed;
            bottom:0;
            left:0;
            display: flex;
            align-items: center;
            width:100%;
            height: 100px;
            box-sizing: border-box;
            padding: 0 30px;
            background: white;
            z-index: 1000;
            .b-input{
                display: flex;
                align-items: center;
                justify-content: center;
                width:250px;
                height: 70px;
                border-radius: 35px;
                background: #f7f7f7;
                color:#71777c;
                i{
                    font-size: 40px;
                }
            }
            .b-do{
                display: flex;
                justify-content: flex-end;
                flex:1;
                .d-item{
                    i{
                        font-size: 50px;
                        color:#71777c;
                    }
                    &:not(:first-child){
                        margin-left: 50px;
                    }
                }
            }
        }
    }
</style>

